<script setup lang="ts">
import { useRouter } from 'vue-router';
import licenseImg from '@/assets/images/license.jpg'; // 营业执照
import qualicaImg from '@/assets/images/qualica.png'; // 服务资格证
import certificateImg from '@/assets/images/certificate.png'; // 备案证
import awart from '@/assets/images/awart.png';
import { informationGet } from '@/services'; // 备案证

const $router = useRouter();
const myData = reactive({
  showPopup: false,
  title: '',
  infoData: {
    customerName: '',
  },
});
const popupImage = ref('');
// 我的订单
const messageList = [
  {
    icon: 'pendingpay',
    title: '待支付',
    type: 'UNPAID',
  },
  {
    icon: 'waitshipment',
    title: '待发货',
    type: 'UNDELIVER',
  },
  {
    icon: 'waitreceiptIcon',
    title: '待收货',
    type: 'DELIVERED',
  },
  {
    icon: 'finishedIcon',
    title: '已完成',
    type: 'COMPLETED',
  },
  {
    icon: 'afterIcon',
    title: '售后',
    type: 'afterSaleFlag',
  },
];
const onMessageClick = (props: any) => {
  $router.push({
    path: '/allOrder',
    query: {
      type: props.type,
    },
  });
};
// 我的信息
const myMessage = [
  {
    icon: 'baseMessage',
    title: '基本信息',
    path: '/userInfo',
  },
  {
    icon: 'certificateData',
    title: '证件资料',
    path: '/certificate',
  },
  {
    icon: 'receivingaddress',
    title: '收货地址',
    path: '/address',
  },
  {
    icon: 'editIcon',
    title: '账号设置',
    path: '/accountSet',
  },
];

const onMyInfoClick = (props: string) => {
  if (props === '/address') {
    $router.push({ path: props });
    sessionStorage.removeItem('addressData');
  } else {
    $router.push({ path: props });
  }
};

const onDilalogClick = (props: string) => {
  if (props === 'license') {
    popupImage.value = licenseImg;
    myData.title = '营业执照';
  } else if (props === 'qualica') {
    popupImage.value = qualicaImg;
    myData.title = '服务资格证';
  } else if (props === 'certificate') {
    popupImage.value = certificateImg;
    myData.title = '备案凭证';
  }
  myData.showPopup = true;
};

// 图片预览
const showImgPreview = ref(false);
const previewImgList = ref<any>([]);
const onImageClick = () => {
  previewImgList.value = [popupImage.value];
  showImgPreview.value = true;
};

const onIconHrefClick = () => {
  window.open('https://www.nmpa.gov.cn/ylqx/ylqxggtg/index.html', '_blank');
};
const onAllOrderClick = () => {
  $router.push({ path: '/allOrder' });
};

const loadData = async () => {
  const { err, data } = await informationGet();
  if (err) {
    showToast(err);
    return;
  }
  myData.infoData = data;
};
onMounted(() => {
  loadData();
});
</script>

<template>
  <div class="my-container">
    <div class="my-top">
      <div class="my-image">
        <van-image :src="awart" />
      </div>
      <div class="my-name">{{ myData.infoData.customerName }}</div>
    </div>
    <div class="my-order">
      <div class="order-box">
        <div class="order-text">我的订单</div>
        <div class="order-icon" @click="onAllOrderClick">
          <div>查看全部订单</div>
          <svg-icon icon-class="right" size="1.4em" />
        </div>
      </div>
      <div class="my-icon-box">
        <div
          v-for="(item, index) in messageList"
          @click="onMessageClick(item)"
          :key="index"
          class="icon-box"
        >
          <svg-icon :icon-class="item.icon" size="1.4em" />
          <div class="icon-text">{{ item.title }}</div>
        </div>
      </div>
    </div>
    <div class="my-message">
      <div class="message-title">我的信息</div>
      <div class="message-icon">
        <div
          v-for="(item, index) in myMessage"
          :key="index"
          class="icon-box"
          @click="onMyInfoClick(item.path)"
        >
          <svg-icon :icon-class="item.icon" size="1.4em" />
          <div class="icon-text">{{ item.title }}</div>
        </div>
      </div>
    </div>
    <div class="my-bottom">
      <div class="my-plat same" @click="onIconHrefClick">
        <div>平台相关</div>
        <div class="plat-text">
          <div>国家药品监督管理局医疗器械公告通告</div>
          <svg-icon icon-class="colorright" size="1.4em" />
        </div>
      </div>
      <div class="same" @click="onDilalogClick('license')">
        <div>营业执照</div>
        <svg-icon icon-class="right" size="1.3em" />
      </div>
      <div class="same" @click="onDilalogClick('qualica')">
        <div>互联网药品信息服务资格证(沪)-经营性-2023-0069</div>
        <svg-icon icon-class="right" size="1.3em" />
      </div>
      <div class="same" @click="onDilalogClick('certificate')">
        <div class="record">
          医疗器械网络交易服务第三方平台备案凭证(沪)网械平台备字[2019]第 00004号
        </div>
        <svg-icon icon-class="right" size="1.3em" />
      </div>
    </div>
  </div>
  <van-popup v-model:show="myData.showPopup" position="bottom" :style="{ maxHeight: '70%' }">
    <div class="my-popup">
      <div class="popup-title">{{ myData.title }}</div>
      <div class="popup-img">
        <van-image @click="onImageClick" contain :src="popupImage" />
      </div>
      <van-button
        class="popup-bottom"
        color="#E89000"
        round
        block
        @click="myData.showPopup = false"
      >
        返回
      </van-button>
    </div>
  </van-popup>
  <van-image-preview v-model:show="showImgPreview" :images="previewImgList"></van-image-preview>
</template>

<style scoped lang="scss">
.my-container {
  width: 100%;
  min-height: calc(100vh - 50px);
  background: #f6f6f6;

  .my-top {
    width: 100%;
    height: 104px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    background: url('@/assets/images/myimg.png') lightgray 50% / cover no-repeat;

    .my-image {
      margin-right: 16px;

      :deep(.van-image__img) {
        width: 64px;
        height: 64px;
        border-radius: 50%;
      }
    }

    .my-name {
      font-size: 16px;
      font-weight: 500;
      color: #ffffff;
    }
  }

  .my-order {
    width: 100%;
    height: 116px;
    background: #ffffff;

    .order-box {
      width: 100%;
      height: 46px;
      padding: 0 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .order-text {
        font-size: 14px;
        font-weight: 500;
        color: #222222;
      }

      .order-icon {
        display: flex;
        align-items: center;
        font-size: 12px;
        font-weight: 400;
        color: #787878;
      }
    }

    .my-icon-box {
      width: 100%;
      height: 62px;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
    }
  }

  .icon-box {
    min-width: 36px;
    height: 46px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .icon-text {
      font-size: 12px;
      font-weight: 400;
      margin-top: 4px;
      color: #454545;
    }
  }

  .my-message {
    width: 100%;
    height: 124px;
    margin-top: 8px;
    background: #ffffff;

    .message-title {
      font-size: 14px;
      font-weight: 500;
      width: 100%;
      height: 54px;
      line-height: 54px;
      padding: 0 16px;
      color: #222222;
    }

    .message-icon {
      width: 100%;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
    }
  }

  .my-bottom {
    width: 100%;
    min-height: 152px;
    font-size: 13px;
    font-weight: 400;
    margin-top: 8px;
    background: white;
    color: #454545;

    .same {
      min-height: 46px;
      display: flex;
      padding: 0 16px;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #f6f6f6;
    }

    .my-plat {
      font-size: 14px;
      font-weight: 500;
      font-style: normal;
      color: #222222;

      .plat-text {
        font-size: 12px;
        font-weight: 400;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #00ba9f;
      }
    }

    .record {
      width: 315px;
      min-height: 40px;
      padding: 12px 0;
    }
  }
}

.my-popup {
  width: 100%;
  padding: 0 16px;

  .popup-title {
    font-size: 14px;
    font-weight: 500;
    width: 100%;
    height: 42px;
    line-height: 42px;
    color: #000000;
  }

  .popup-img {
    width: 100%;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;

    .van-image {
      width: 170px;
      height: 100%;
    }
  }

  .popup-bottom {
    margin: 15px 0;
    height: 40px;
  }
}
</style>
